<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

<!--hidining the detaile of java script-->
function editNodeText(regex, input, helpId, helpMessage)

{       

 // See if the visitor entered the right information

if (!regex.test(input)) {

// If the wrong information was entered, warn them

if (helpId != null)

while (helpId.firstChild) 
// Remove any warnings that may exist

helpId.removeChild(helpId.firstChild);

helpId.appendChild(document.createTextNode(helpMessage)); 
// Add new warning

return false;

}

else {
// If the right information was entered, clear the help message

if (helpId != null){

while (helpId.firstChild) 
// Remove any warnings that may exist

helpId.removeChild(helpId.firstChild);

}

return true;

}      }

function isTheFieldEmpty(inputField, helpId) { 
// inputField – ID Number for the html text box

// helpId – ID Number for the child node I want to print a warning in

// See if the input value contains any text

return editNodeText(/^[A-Za-z\.\' \-]{2,15}\s?[A-Za-z\.\' \-]{2,15}\s?[A-Za-z\.\' \-]{2,15}/, inputField.value, helpId, "Please enter a valid name.");

}

/*  inputField.value – Value typed in the html text box */

function isAddressOk(inputField, helpId) { 
// See if the input value contains any text

return editNodeText(/^[A-Za-z0-9\.\' \-]{5,30}$/, inputField.value, helpId, "Enter a Street (Ex.1234 Main St.)");

}

function isStateOk(inputField, helpId) {        // See if the input value contains any text

return editNodeText(/^A[LKSZRAEP]|C[AOT]|D[EC]|F[LM]|G[AU]|HI|I[ADLN]|K[SY]|LA|
		M[ADEHINOPST]|N[CDEHJMVY]|O[HKR]|P[ARW]|RI|S[CD]|T[NX]|UT|V[AIT]|W[AIVY]$/i, inputField.value, helpId, "Enter a State Code in Uppercase (Ex.NY, PA, CA)");

}

function isPhoneOk(inputField, helpId) {        // See if the input value contains any text

return editNodeText(/^([0-9]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})( |-)?([0-9]{3}( |-)?[0-9]{4}|[a-zA-Z0-9]{7})$/, inputField.value, helpId, "Enter a Phone Number (Ex.412-828-3000)");

}

function isEmailOk(inputField, helpId) {
// See if the input value contains any text

return editNodeText(/^[A-Za-z0-9._-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/, inputField.value, helpId, "Enter an Email (Ex. derekbanas@newthinktank.com)");

}
</script>
</head>
<body>

	<div>
		Enter your name: <input id="name" name="name" type="text" size="30″
			onblur="isTheFieldEmpty(this, document.getElementById('name_help'))" />
		<span id="name_help"></span>

		<!-- this is the id number for the text box -->
	</div>

	<div>
		Enter your street address: <input id="street" name="street"
			type="text" size="30″
			onblur= "isAddressOk(this, document.getElementById('street_help'))" />
		<span id="street_help"/>
	</div>

	<div>
		Enter your city: <input id="city" name="city" type="text" size="30"
			onblur="isTheFieldEmpty(this, document.getElementById('city_help'))" />
		<span id="city_help"></span>
	</div>


	<div>
		Enter your state code: <input id="state" name="state" type="text"
			size="2"
			onblur="isStateOk(this, document.getElementById('state_help'))" /> 
			<span id="state_help"></span>
	</div>


	<div>
		Enter your phone number: <input id="phone" name="phone" type="text"
			size="15"
			onblur="isPhoneOk(this, document.getElementById('phone_help'))" /> 
			<span id="phone_help"></span>
	</div>


	<div>
		Enter your email:<input id="email" name="email" type="text" size="30"
			onblur="isEmailOk(this, document.getElementById('email_help'))" />
			<span id="email_help"></span>
	</div>


	<div>
		Click Button for a 3 Second Alarm : <input id=”alarm” name="alarm"
			type="button" value="Set Alarm"
			onclick="setTimeout('alert(\’3 seconds!\’)',3000)" />
	</div>
</body>
</html>